<template>
    <div>
        <div class="top">
            <van-icon class="icon" name="arrow-left" size="25" @click="goback"/>
            <span class="text">确认服务地址</span>
        </div>
        <div>
            <van-search
            v-model="value"
            id="input"
            placeholder="请输入搜索关键词"
            shape="round"
            show-action
            :label="`${this.name}`"
            >
            <template #action>
                <div @click="showPopup">选择</div>
                <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
                    <van-area title="标题" :area-list="areaList" :columns-num="2" @confirm="changeAddress" />
                </van-popup>
            </template>
            </van-search>   
        </div>

        <!-- 地图 -->
        <div id="container" class="container"></div>
    </div>
</template>

<script>
    import AMapLoader from '@amap/amap-jsapi-loader';
    import { areaList } from '@vant/area-data';
    import city from '../../../public/city.json'
    export default {
        data() {
            return {
                map: null,
                areaList,
                value: '',
                show: false,
                name:'北京市',
                marker:"",
                city,
                citys:[],
                form: {
					lng: "",
					lat: "",
					address: "",
					//地区编码
					adcode: "",
				},
                map:{
                    lng:'116.405285',
                    lat:'39.904989'
                }
            }
        },
        methods: {
            goback(){
                this.$router.go(-1)
            },
            showPopup() {
                this.show = true;
            },
            changeAddress(event){
    		    // console.log(event)
                let addr = event[1]
                console.log(addr);
                let citys = this.city
                console.log(citys);
                for(let city in citys){
                    if(addr.name == citys[city].name){
                        this.map.setZoomAndCenter(14, [citys[city].lng,citys[city].lat]);
                        console.log('找到了',citys[city].name);
                    }
                }

                this.name = addr.name
                this.show = false;
		    },
            setMapMarker() {
			// 自动适应显示想显示的范围区域
			this.map.setFitView();
			this.marker = new AMap.Marker({
				map: this.map,
				position: [this.form.lng, this.form.lat],
			});
			this.map.setFitView();
			this.map.add(this.marker);
			},
			// 清除点
			removeMarker() {
				if (this.marker) {
					this.map.remove(this.marker);
				}
			},
            
        },
        mounted () {
            // this.initMap();
            AMapLoader.load({
				key: "26ddbfa8eff008e3dda63719d7648d45", // 申请好的Web端开发者Key，首次调用 load 时必填
				version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
				plugins: ['AMap.Scale',"AMap.Geocoder", "AMap.AutoComplete"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
			}).then((AMap) => {
				this.map = new AMap.Map("container",{
					zoom:13,
					center:[116.405285,39.904989],
					viewMode:'3D',
                    dragEnable: true, // 是否允许鼠标拖拽
                    scrollWheel: true, // 鼠标滚轮放大缩小
                    doubleClickZoom: true, // 双击放大缩小
                    keyboardEnable: false, // 键盘控制发达缩小移动旋转
                    touchZoom: false, // 手势控制
                    getImageData:true,
				});
				//点击获取经纬度;
				this.map.on("click", (e) => {
                    console.log(e);
                    //创建一个数组   存放点击地图返回的经纬度
                    var cpoint = []
                    cpoint.push(this.form.lng)
                    cpoint.push(this.form.lat)
                    var placeSearch = new AMap.PlaceSearch({
                        city: this.city,
                        pageSize: 10,
                        pageIndex: 1, //请求页码，默认1
                        autoFitView: false,
                    });

                    placeSearch.searchNearBy('', cpoint, 500, (status, result) => {
                        console.log(status, result);
                    })
					// 获取经纬度
					this.form.lng = e.lnglat.lng;
					this.form.lat = e.lnglat.lat;
					// 清除点
					this.removeMarker();
					// 标记点
					this.setMapMarker();
                    // console.log(this.form.lng, this.form.lat);
				});
			}).catch((e) => {
				console.log(e);
			});
        },
    }
</script>

<style lang="scss" scoped>
.top {
    width: 100vw;
    height: 54px;
    background-color: #fff;
    position: relative;
    display: flex;
    .icon {
        position: absolute;
        top: 20%;
        color: #000;
        margin-left: 10px;
    }
    .text {
        font-size: 20px;
        position: absolute;
        left: 35%;
        top:20%;
        color: #000;
    }
}
.container{
    width: 100vw;
    height: 200px;
  }
</style>